<template>
  <div>
    <div class="myheader">
      
      <el-select
                    v-model="listQuery.station_id"
                    filterable
                    placeholder="请选择站点"
                    style="float:left;wdith:200px"
                >
                    <el-option
                        v-for="item in options1"
                        :key="item.id"
                        :label="item.station_name"
                        :value="item.id"
                    ></el-option>
                </el-select>
                
      
      <el-button
        v-waves
        class="filter-item"
        style="margin-left: 10px;margin-top: 3px;"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
      >搜索</el-button>
      
    </div>

    <el-table :data="tableData" border fit style="margin:0px auto;;width: 98.5%">
      <el-table-column prop="id" align="center" label="id" width="50" />
      <el-table-column prop="risk_category" align="center" label="风险名称" />
      <el-table-column prop="station_name" align="center" label="站点名称" />
      <el-table-column prop="project_name" align="center" label="项目名称" />
      <el-table-column prop="description" align="center" label="具体描述" />
      <el-table-column prop="price" align="center" label="分配的积分" />
      
      <el-table-column prop="staff_name" align="center" label="上传人姓名" />
      <el-table-column prop="url" label="照片1" width="140" align="center">
                <template slot-scope="scope">
                    
            　　　　<img :src="scope.row.url" width="100" class="head_pic"/>
            　　</template>
            
            </el-table-column>
            <el-table-column prop="url1" label="照片2" width="140" align="center">
                <template slot-scope="scope">
            　　　　<img :src="scope.row.url1" width="100" class="head_pic"/>
            　　</template>
            
            </el-table-column>
            <el-table-column prop="url2" label="照片3" width="140" align="center">
                <template slot-scope="scope">
            　　　　<img :src="scope.row.url2" width="100" class="head_pic"/>
            　　</template>
            
            </el-table-column>
      
      <el-table-column prop="uptime" align="center" label="上传时间" />
      <!-- <el-table-column prop="active" align="center" label="状态" /> -->
      <el-table-column prop="state" align="center" label="审核状态" />
      
      <!-- <el-table-column
                label="操作"
                align="center"
                width="230"
                class-name="small-padding fixed-width"
            >
                <template slot-scope="{row}">
                    <el-button
                        type="primary"
                        size="mini"
                        @click="handleUpdate(row)"
                    >{{row.active === 1 ? '下架' : '上架'}}</el-button>
                </template>
            </el-table-column> -->
      
      <el-table-column
        label="操作"
        align="center"
        width="230"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="{row}">
          <el-button type="primary" size="mini" @click="handleUpdate(row)">审核</el-button>
          <!-- <el-button
            v-if="row.status!='deleted'"
            size="mini"
            type="danger"
            @click="del_address(row)"
          >删除</el-button> -->
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.pageNo"
      :limit.sync="listQuery.pageSize"
      @pagination="getTableData"
    />

    <el-dialog :visible.sync="dialogPvVisible" :title="dialogStatus=='create'?'添加风险信息':'修改风险信息'">
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="temp"
        label-position="left"
        label-width="100px"
        style="width: 400px; margin-left:50px;"
      >
       
         <!-- <el-form-item label="风险名称" prop="risk_category">
          <el-input v-model="temp.risk_category" />
        </el-form-item>  
        <el-form-item label="风险描述" prop="station_name">
          <el-input v-model="temp.station_name"/>
        </el-form-item> 
     <el-form-item label="风险预计持续时间段" prop="project_name">
          <el-input v-model="temp.project_name"/>
        </el-form-item>     -->
        
        <!-- <div style="width:600px;height:40px;margin-left:8px;margin-bottom:15px">
                <span
                    style="height:40px;line-height:40px;font-size:14px;color:rgba(0,0,0,0.7);width:93px;display:block;float:left"
                >具体描述</span>
                <el-select
                    v-model="temp.description"
                    filterable
                    placeholder="请选择"
                    style="float:left"
                >
                    <el-option
                         v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                </el-select>
            </div> -->
            <el-form-item label="审核状态" prop="state">
          <!-- <el-input v-model="temp.state" /> -->
          <el-radio v-model="temp.state" label="有效">有效</el-radio>
         <el-radio v-model="temp.state" label="无效">无效</el-radio>
        </el-form-item>
        <el-form-item label="分配的积分" prop="price">
          <el-input v-model="temp.price" />
        </el-form-item>
        
        <!-- <el-form-item label="状态" prop="active">
          <el-input v-model="temp.active" />
        </el-form-item>
        <el-form-item label="上传人姓名" prop="staff_name">
          <el-input v-model="temp.staff_name" />
        </el-form-item>
        <el-form-item label="照片" prop="url">
          <el-input v-model="temp.url" />
        </el-form-item> -->
        
        
  

        <!-- <el-form-item label="上传时间" prop="uptime">
          <el-input v-model="temp.uptime" />
        </el-form-item> -->
        

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogPvVisible = false">取消</el-button>
        <el-button
          type="primary"
          :loading="btnloading"
          @click="dialogStatus==='create'?createData():updateData()"
        >确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination
import $ from "jquery";
import waves from "@/directive/waves";
import ajax from "@/utils/myajax";
export default {
  components: { Pagination },
  directives: { waves },
  
  methods: {
    //  getTableData1() {
    //         let me = this;

    //         ajax('behavior/select_behavior', {}, function(data) {
    //             me.options = data;
    //             // console.log(data);
    //         });
    //     },
      
    getList() {
      var me = this;
      ajax("riskshow/find_riskshow", this.listQuery, function(data) {
        var arr = data.items;
                // var na = arr.map(function(v){return v.active;});
                for (var i = 0; i < arr.length; i++) {
                    arr[i].url = 'http://101.132.154.10:8800/riskshow/find_img?img_url=' + arr[i].url;
                    arr[i].url1 = 'http://101.132.154.10:8800/riskshow/find_img?img_url=' + arr[i].url1;
                    arr[i].url2 = 'http://101.132.154.10:8800/riskshow/find_img?img_url=' + arr[i].url2;
                    // me.img_url1 = arr[i].img_url;
                }
                me.tableData = arr;
        me.total = data.total;
        me.listQuery.pageNo = data.pageNo;
        me.listQuery.pageSize = data.pageSize;
      });
    },
    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    },
    handleUpdate(row) {
      this.dialogStatus = "update";
      this.dialogPvVisible = true;
      this.temp = Object.assign({}, row); // copy obj
      // 当更改data中数据后，得到更新后的DOM
      this.$nextTick(() => {
        this.$refs["dataForm"].clearValidate();
      });
    },
    del_address(row) {
      var me = this;
      this.$confirm("永久删除该部门, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          ajax("riskshow/del_riskshow", { id: row.id }, function(data) {
            if (data == 1) {
              me.$message({
                type: "success",
                message: "删除成功!"
              });
              me.getTableData();
            } else {
              me.$message({
                type: "success",
                message: "删除失败!"
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    resetTemp() {
      this.temp = {
        project_name: "",
        active: "",
        staff_name: "",
        url: "",
        state: "",
        uptime: "",
        description: "",
        price: "",
        project_name: "",
        
        station_name:''
       
      };
    },
    getTableData1() {
            let me = this;

            ajax('station/select_station', {}, function(data) {
                me.options1 = data;
                // console.log(data);
            });
        },
    getTableData() {
      var me = this;
      ajax("riskshow/find_riskshow", this.listQuery, function(data) {
        me.dialogPvVisible = false;
         me.tableData = data.items;
                me.total = data.total;
                me.listQuery.pageNo = data.pageNo;
                me.listQuery.pageSize = data.pageSize;
      });
    },
    updateData() {
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          var me = this;
          this.btnloading = true;
          ajax("riskshow/upd_state", this.temp, function(data) {
            me.getList();
            me.getTableData();
            me.dialogPvVisible = false;
            me.btnloading = false;
            me.$message({
              title: "成功",
              message: "修改成功",
              type: "success",
              duration: 2000
            });
            me.resetTemp();
          }); 
        }
      });
    },
    ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    createData() {
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          var me = this;
          this.btnloading = true;
          ajax("riskshow/add_riskshow", this.temp, function(data) {
            me.getTableData();
            me.dialogPvVisible = false;
            me.btnloading = false;
            me.$message({
              title: "成功",
              message: "创建成功",
              type: "success",
              duration: 2000
            });
          });
        }
      });
    },
    handleCreate() {
      this.dialogStatus = "create";
      this.dialogPvVisible = true;
      this.resetTemp();
      this.$nextTick(() => {
        this.$refs["dataForm"].clearValidate(); //清除验证
      });
    }
  },

  data() {
    return {
        options1:[],
        options:[{
          value: 'I',
          label: 'I'
        }, {
          value: 'II',
          label: 'II'
        }, {
          value: 'III',
          label: 'III'
        }, {
          value: 'IV',
          label: 'IV'
        }, {
          value: 'V',
          label: 'V'
        }, {
          value: 'VI',
          label: 'VI'
        }],
      listQuery: {
        pageNo: 1,
        pageSize: 10,
      },
      total: 100,
      rules: {
        img_url: [{ required: true, message: "照片不能为空！", trigger: "blur" }],
        nation: [{ required: true, message: "民族不能为空！", trigger: "blur" }],
        station_name:[{ required: true, message: "站点名称不能为空！", trigger: "blur" }],
        
        description: [{ required: true, message: "具体描述不能为空！", trigger: "blur" }],
        uptime: [{ required: true, message: "上传时间不能为空！", trigger: "blur" }],
        project_name: [{ required: true, message: "时间段不能为空！", trigger: "blur" }],
        price: [{ required: true, message: "分配的积分不能为空！", trigger: "blur" }],
        risk_category: [{ required: true, message: "风险类型不能为空！", trigger: "blur" }],
        state: [{ required: true, message: "审核状态不能为空！", trigger: "blur" }],
        url: [{ required: true, message: "照片不能为空！", trigger: "blur" }],
        createtime: [{ required: true, message: "入职时间不能为空！", trigger: "blur" }],
        active: [
          { required: true, message: "状态不能为空！", trigger: "blur" }
        ],
        staff_name: [
          { required: true, message: "上传人姓名地址不能为空！", trigger: "blur" }
        ],
        id: [
          { required: true, message: "id不能为空！", trigger: "blur" }
        ]
      },
      temp: {
        active: "",
        sid:'',
        id:'',
        // description: "",
        // departmentname: "",
        // price: "",
        // project_name: "",
        // createtime: "",
        // risk_category: "",
        // station_name: "",
       
      },
      dialogStatus: "create",
      dialogPvVisible: false,
      tableData: [
       
      ],
      btnloading: false
    };
  },
  created() {
    var me = this
    me.getTableData()
    me.getList()
    me.getTableData1();
  }
}
</script>
<style scoped>
 .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .pic>>>.el-upload--text{
      width:180px
  }
</style>